import React from 'react';
import { Card, CardContent, Typography, Button } from '@mui/material';
import { Business } from '@material-ui/icons';
import { useNavigate } from 'react-router-dom';
import './businessJoinCard.css';

export default function BusinessJoinCard() {
  const navigate = useNavigate();

  return (
    <Card className="businessJoinCard">
      <CardContent>
        <div className="businessJoinIcon">
          <Business fontSize="large" />
        </div>
        <Typography variant="h5" component="h2" className="businessJoinTitle">
          Join as a Business
        </Typography>
        <Typography color="textSecondary" className="businessJoinSubtitle">
          Start your business journey with us
        </Typography>
        <Button 
          variant="contained" 
          color="primary" 
          className="businessJoinButton"
          onClick={() => navigate('/business/register')}
          fullWidth
        >
          Join Now
        </Button>
      </CardContent>
    </Card>
  );
} 